<template>
  <view id="gift">
    <view class="nav">
      <view
        class="navson"
        :class="{ navsonshow: shownav === i }"
        v-for="(item, i) in navlist"
        :key="i"
        @click="changenav(i)"
      >
        {{ item }}
      </view>
    </view>

    <!-- 购买礼品卡 -->
    <view class="buygift" v-if="shownav === 0">
      <image src="@/static/user/giftbg.png" class="giftbg" mode="widthFix" />
      <view class="giftbox">
        <view class="gifttit"> 送TA六一限定卡，陪TA一口回到童年 </view>
        <view class="giftitem">
          <view class="giftson" v-for="(item, i) in giftlist" :key="i">
            <image
              :src="ensureHttp(item.image)"
              class="giftimg"
              mode="widthFix"
            />
            <view class="gstit">{{ item.title }}</view>
          </view>
        </view>
      </view>

      <view class="giftbox">
        <view class="gifttit"> 送TA抱抱治愈卡，用心意卡说出爱 </view>
        <view class="giftitem">
          <view class="giftson" v-for="(item, i) in giftlist2" :key="i">
            <image :src="item.img" class="giftimg" mode="widthFix" />
            <view class="gstit">{{ item.tit }}</view>
          </view>
        </view>
      </view>
      <view style="height: 80rpx"></view>
      <view class="bot">
        <view class="botleft">购买须知</view>
        <view class="botline"></view>
        <view class="botright">礼品卡章程</view>
      </view>
    </view>
    <!-- 购买礼品卡 -->
    <!-- 我的礼品卡 -->
    <view class="mygift" v-if="shownav === 1">
      <view class="mygiftbody">
        <view class="mynavbox">
          <view class="mynav">
            <view
              class="mnson"
              :class="{ mnsonshow: showlist === i }"
              v-for="(item, i) in list"
              :key="i"
              @click="changelist(i)"
              >{{ item }}</view
            >
          </view>
          <view class="mynavtit">兑换礼品卡</view>
        </view>

        <view class="mygiftlist" v-if="showlist === 0">
          <image
            src="@/static/user/giftcard.png"
            class="listimg"
            mode="widthFix"
          />
        </view>

        <view class="mygiftlist" v-if="showlist === 1">
          <image
            src="@/static/user/giftcard.png"
            class="listimg"
            mode="widthFix"
          />
        </view>
      </view>

      <view class="mybot">
        <button class="mybut1">获取记录</button>
        <button class="mybut2">赠送记录</button>
      </view>
    </view>
    <!-- 我的礼品卡 -->
  </view>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { gift } from "../../request/API/user";
import { ensureHttp} from "../../utils/public"

const navlist = ref(["购买礼品卡", "我的礼品卡"]);
const shownav = ref(0);
const changenav = (i) => {
  shownav.value = i;
};
const giftlist = ref([
  // {
  //   img: "../../static/user/giftson2.png",
  //   tit: "梦回童年六一玩趣",
  // },
  // {
  //   img: "../../static/user/giftson2.png",
  //   tit: "大宝宝”通行证",
  // },
]);

const giftlist2 = ref([
  {
    img: "../../static/user/giftson1.png",
    tit: "拥抱我的小宇宙",
  },
  {
    img: "../../static/user/giftson1.png",
    tit: "给生活一个拥抱",
  },
  {
    img: "../../static/user/giftson1.png",
    tit: "拥抱所爱",
  },
  {
    img: "../../static/user/giftson1.png",
    tit: "拥抱同一份热爱",
  },
  {
    img: "../../static/user/giftson1.png",
    tit: "大宝宝”通行证",
  },
  {
    img: "../../static/user/giftson1.png",
    tit: "大宝宝”通行证",
  },
]);
const list = ref(["可使用（0）", "不可使用（0）"]);
const showlist = ref(0);
const changelist = (i) => {
  showlist.value = i;
};

// 页面加载时触发
onMounted(() => {
  gift()
    .then((res) => {
      // console.log(res.data);
      giftlist.value = res.data;
    })
    .catch((err) => {
      console.log(err);
    });
});
</script>


<style lang="scss">
#gift {
  width: 100%;
  height: 100vh;
  background-color: #f0f8fa;
  .nav {
    width: 100%;
    height: 120rpx;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .navson {
      width: 50%;
      text-align: center;
    }
    .navsonshow {
      width: 50%;
      text-align: center;
      color: #adb838;
      position: relative;
    }
    .navsonshow::after {
      position: absolute;
      content: "";
      display: block;
      width: 50rpx;
      height: 5px;
      background-color: #adb838;
      bottom: -90%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .buygift {
    width: 100%;
    .giftbg {
      width: 100%;
      height: 100%;
    }
    .giftbox {
      width: 94%;
      margin: auto;
      .gifttit {
        width: 100%;
        font-size: 36rpx;
        font-weight: bold;
        margin: 20rpx 0;
      }
      .giftitem {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .giftson {
          width: 48%;
          border-radius: 16rpx;
          text-align: center;
          background-color: #fff;
          .giftimg {
            width: 100%;
            border-radius: 16rpx;
          }
          .gstit {
            margin: 10rpx 0;
          }
        }
      }
    }
    .bot {
      width: 100%;
      height: 80rpx;
      position: fixed;
      bottom: 0;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #acb733;
      font-size: 26rpx;
      .botline {
        width: 5rpx;
        height: 30%;
        border-right: 6rpx solid #acb733;
        margin: 0 20rpx;
      }
    }
  }
  .mygift {
    .mybot {
      width: 100%;
      height: 120rpx;
      background-color: #fff;
      position: fixed;
      bottom: 0;
      padding: 0 30rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .mybut1 {
        width: 46%;
        border-radius: 50rpx;
        color: #acb733;
        background-color: #fff;
        border: #acb733 solid 2rpx;
      }
      .mybut2 {
        width: 48%;
        border-radius: 50rpx;
        background-color: #acb733;
        color: #fff;
      }
    }
    .mygiftbody {
      width: 94%;
      margin: auto;
      padding: 30rpx 0;
      box-sizing: border-box;
      .mynavbox {
        display: flex;
        justify-content: space-between;
        .mynav {
          display: flex;
          .mnson {
            font-size: 28rpx;
            margin-right: 20rpx;
            padding: 15rpx;
            box-sizing: border-box;
            text-align: center;
          }
          .mnsonshow {
            text-align: center;
            font-size: 28rpx;
            margin-right: 20rpx;
            padding: 15rpx;
            box-sizing: border-box;
            background-color: #fff;
            color: #acb733;
            border-radius: 50rpx;
          }
        }
        .mynavtit {
          font-size: 28rpx;
          color: #acb733;
          padding: 15rpx;
          box-sizing: border-box;
        }
      }
      .mygiftlist {
        width: 100%;
        text-align: center;
        .listimg {
          width: 300rpx;
          margin: auto;
          margin-top: 300rpx;
        }
      }
    }
  }
}
</style>
